@import './variables.less';
@import '../../style/mixins.less';

.fnx-button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	height: var(--fnx-button-default-height);
	margin: 0;
	padding: 0;
	font-size: var(--fnx-button-default-font-size);
	line-height: var(--fnx-button-default-line-height);
	text-align: center;
	border-radius: var(--fnx-button-border-radius);
	cursor: pointer;
	transition: opacity var(--fnx-animation-duration-fast);
	-webkit-appearance: none;

	&::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: var(--fnx-black);
		border: inherit;
		border-color: var(--fnx-black);
		border-radius: inherit; /* inherit parent's border radius */
		transform: translate(-50%, -50%);
		opacity: 0;
		content: ' ';
	}

	&:active::before {
		opacity: 0.1;
	}

	&--loading,
	&--disabled {
		&::before {
			display: none;
		}
	}

	&--round {
		border-radius: var(--fnx-button-round-border-radius);
	}

	&--rect {
		border-radius: 0;
	}

	&--lg {
		font-size: var(--fnx-button-lg-font-size);
		padding: 0 var(--fnx-button-lg-padding);
		height: var(--fnx-button-lg-height);
	}

	&--md {
		font-size: var(--fnx-button-md-font-size);
		padding: 0 var(--fnx-button-md-padding);
		height: var(--fnx-button-md-height);
	}

	&--sm {
		font-size: var(--fnx-button-sm-font-size);
		padding: 0 var(--fnx-button-sm-padding);
		height: var(--fnx-button-sm-height);
	}

	&--xs {
		font-size: var(--fnx-button-xs-font-size);
		padding: 0 var(--fnx-button-xs-padding);
		height: var(--fnx-button-xs-height);
	}

	&--default {
		color: var(--fnx-button-default-color);
		background-color: var(--fnx-button-default-background-color);
		border: var(--fnx-button-border-width) solid
			var(--fnx-button-default-border-color);
	}

	&--primary {
		color: var(--fnx-button-primary-color);
		background-color: var(--fnx-button-primary-background-color);
		border: var(--fnx-button-border-width) solid
			var(--fnx-button-primary-border-color);
	}

	&--success {
		color: var(--fnx-button-success-color);
		background-color: var(--fnx-button-success-background-color);
		border: var(--fnx-button-border-width) solid
			var(--fnx-button-success-border-color);
	}

	&--danger {
		color: var(--fnx-button-danger-color);
		background-color: var(--fnx-button-danger-background-color);
		border: var(--fnx-button-border-width) solid
			var(--fnx-button-danger-border-color);
	}

	&--warning {
		color: var(--fnx-button-warning-color);
		background-color: var(--fnx-button-warning-background-color);
		border: var(--fnx-button-border-width) solid
			var(--fnx-button-warning-border-color);
	}

	&--plain {
		background-color: var(--fnx-button-plain-background-color);

		&.fnx-button--primary {
			color: var(--fnx-button-primary-background-color);
		}

		&.fnx-button--success {
			color: var(--fnx-button-success-background-color);
		}

		&.fnx-button--danger {
			color: var(--fnx-button-danger-background-color);
		}

		&.fnx-button--warning {
			color: var(--fnx-button-warning-background-color);
		}
	}

	&__content {
		display: flex;
		align-items: center;
		justify-content: center;

		&::before {
			content: ' ';
		}
	}

	.fnx-icon {
		font-size: 1.2em;
	}

	&--block {
		display: block;
		width: 100%;
	}

	&--disabled {
		cursor: not-allowed;
		opacity: var(--fnx-button-disabled-opacity);

		&::before {
			display: none;
		}
	}

	&--loading {
		cursor: default;

		&::before {
			display: none;
		}

		.fnx-icon {
			font-size: 1.4em;
		}
	}

	.fnx-icon + &__text,
	&__text + .fnx-icon {
		margin-left: var(--fnx-padding-base);
	}

	&--custom-color {
		color: var(--fnx-white);
	}

	&--hairline {
		border-width: 0;

		&::after {
			border-color: inherit;
			border-radius: calc(var(--fnx-button-border-radius) * 2);
		}

		&.fnx-button--round::after {
			border-radius: var(--fnx-button-round-border-radius);
		}

		&.fnx-button--rect::after {
			border-radius: 0;
		}
	}
}
